<!DOCTYPE html>
<html>

	<head>
		<meta charset="UTF-8">
		<script src="https://code.jquery.com/jquery-3.6.0.min.js"></script>
		<title>个人用户注册</title>
	</head>

	<body>
		<h3>个人用户注册</h3>
		<table>
			<form action="#">
				<tr>
					<td>用户名：</td>
					<td><input type="text" class="name"></td>
					<td><span class="tip"></span></td>
				</tr>
				<tr>
					<td>手机号码：</td>
					<td><input type="password"></td>
					<td></td>
				</tr>
				<tr>
					<td>个人邮箱：</td>
					<td><input type="email"></td>
					<td></td>
				</tr>
				<tr>
					<td></td>
					<td>        <button class="btn">注册<tton>
					</td>
					<td></td>
				</tr>
		</table>




		<script>
			$(".btn").click(function() {
				$.ajax({
					type: 'GET',
					url: 'https://mock.apifox.cn/m1/2821141-0-default/username',
					data: {
						name: $('.name').val()
					},
					dataType: 'json',
					success: function(res) {
						if (res.name == $('.name').val()) {
							$(".tip").text("用户名存在");
						} else {
							$(".tip").text("用户名有效");
						}
					}
				})
			});
		</script>
		<style>body {
  background-color: bisque;
}</style>
	</body>

</html>
